<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .grid table {
        width: 500px;
        text-align: center;
        border-collapse: collapse;
      }

      .grid tr th {
        background-color: orange;
      }

      .grid tr td {
        border: 1px dashed orange;
      }

      h1 {
        margin-left: 15%;
      }

      .book {
        border-bottom: 1px dashed greenyellow;
        background-color: orange;
        width: 500px;
        padding: 10px 0px 10px 0px;
      }

      .grid {
        margin-left: 30%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="grid">
        <div>
          <h1>图书管理</h1>
          <div class="book">
            <div>书名：<input type="text" v-model="goods.book_name" /></div>
            <div>作者：<input type="text" v-model="goods.book_author" /></div>
            <div>描述：<input type="text" v-model="goods.book_desc" /></div>
            <div><button type="button" @click="handle">提交</button></div>
            <div><button type="button" @click="updateBtn">修改</button></div>
          </div>
        </div>

        <table>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>作者</th>
            <th>描述</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in books" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.books_name}}</td>
            <td>{{item.books_author}}</td>
            <td>{{item.books_desc}}</td>
            <td>
              <a href="" @click.prevent="editBtn(item.id)">编辑</a>
              <span>|</span>
              <a href="" @click.prevent="deleteBook(item.id)">删除</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.4/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script type="text/javascript">
      const app = new Vue({
        el: "#app",

        data: {
          books: [],
          goods: {
            id: "",
            book_name: "",
            book_author: "",
            book_desc: "",
          },
        },
        created() {
          this.getBooks();
        },
        methods: {
          // 获取数据表所有信息
          async getBooks() {
            // const { data: res } = await axios.get("/books");
            let { data } = await axios.get("http://127.0.0.1:8080/books");
            this.books = data;
          },
          // 添加数据
          async handle() {
            let goodsInfo = this.goods;
            const { data: res } = await axios.post(
              "http://127.0.0.1:8080/add",
              { goodsInfo }
            );
            let { code, message } = res;
            if (code == 10000) {
              alert(message);
              this.goods.book_name = "";
              this.goods.book_author = "";
              this.goods.book_desc = "";
              this.getBooks();
            } else {
              alert(message);
            }
          },
          //删除数据
          async deleteBook(id) {
            const { data: res } = await axios.post(
              `http://127.0.0.1:8080/delete`,
              { id }
            );
            let { code, message } = res;
            if (code === 10002) {
              alert(message);
              this.getBooks();
            } else {
              alert(message);
            }
          },
          //编辑数据 通过id获取数据
          async editBtn(id) {
            //":"是别名的意思
            const { data: res } = await axios.post(
              `http://127.0.0.1:8080/editBtn`,
              { id }
            );
            let { books_name, books_author, books_desc } = res[0];
            this.goods.book_name = books_name;
            this.goods.book_author = books_author;
            this.goods.book_desc = books_desc;
            this.goods.id = id
          },
          //修改按钮 时完成修改
          async updateBtn() {
            let goodsData = this.goods
            const { data: res } = await axios.post('http://127.0.0.1:8080/update',{goodsData});
            let {code,message} = res;
            if(code == 10004){
              alert(message)
              this.getBooks()
            }else{
              alert(message)
            }
            // this.getBooks();
          },
        },
      });
    </script>
  </body>
</html>
